<template>
  <div>
    App...
    <button ref="btn">按钮</button>
    <input type="text" ref="input" />
    <Child ref="child" />
  </div>
</template>

<script>
import Child from "./Child.vue";
/*
  ref 语法
    功能：
      1. 获取真实DOM元素
      2. 获取组件实例对象

    语法：
      1. 给元素绑定ref属性
      2. 通过 this.$refs.xxx 获取真实DOM元素
*/
export default {
  name: "App",
  created() {
    console.log("created", this.$refs.btn);
  },
  beforeMount() {
    console.log("beforeMount", this.$refs.btn);
  },
  mounted() {
    console.log("mounted", this.$refs.btn);
    console.log("mounted", this.$refs.input);
    console.log("mounted", this.$refs.child);
  },
  components: {
    Child,
  },
};
</script>

<style></style>
